<%--
  Created by IntelliJ IDEA.
  User: XiongMM
  Date: 2019/7/29
  Time: 上午11:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <style type="text/css">
        .pg_header{
            position: fixed;
            height: 48px;
            top: 0;
            left: 0;
            right: 0;
            background-color: #2459a2;
            line-height: 48px;
        }
        .pg_header .logo{
            margin: 0 auto;
            float: left;
            width: 200px;
            text-align: center;
            line-height: 48px;
            font-size: 28px;
            color: white;
        }
        .pg_dl{
            left: 400px;
            display: inline-block;
            padding: 0 40px;
            color: white;
        }
        .pg_header .pg_dl:hover{
            background-color: #2459fb;
            cursor: pointer;
        }
        .left{
            margin-top: 20px;
            width: 400px;
            display: inline-block;
            float: left;
        }
        .pg_body{
            margin-top: 50px;
            font-size: 18px;
            display: inline-block;
            width: 200px;
        }
        .pg_body .menu{
            width: 800px;
            padding: 15px;
            float: left;
            font-weight: bold;
        }
        input[type="text"]{
            width: 200px;
            height: 25px;
            border-radius: 6px;
        }
        input[type="password"]{
            width: 200px;
            height: 25px;
            border-radius: 6px;
        }
        input[type="button"]{
            background-color: #555555;
            border: none;
            color: white;
            padding: 12px 29px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 17px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        input[type="submit"]{
            background-color: #555555;
            border: none;
            color: white;
            padding: 12px 29px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 17px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        .kong{
            margin-top: -54px;
            margin-left: 200px;
            float:left;
            padding: 15px;
        }
        .img{
            width: 50px;
            height: 40px;
        }
        .can{
            width: 1220px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            text-align: center;
            display: inline-block;
        }
        .tian{
            color: red;
            float: right;
            font-size: 12px;
            margin-right: -120px;
            margin-top: -25px;
        }
    </style>
</head>
<body id="i88" style="margin: 0">

<div class = "pg_header">
    <a class = "logo">LOGO</a>
    <a class="pg_dl" id="i77">注册</a>
</div>

<form name="tijiao" method="post" onsubmit="return check()" action="/servlet/final/register">
    <div class="left"></div>
    <div class="pg_body">

        <div class="menu">用户名:</div>
        <div class="kong">
            <input id="user_name" type="text" name="userName" placeholder="请输入用户名" onblur="checkUserName();"/>
            <span id="user_name_span" class="tian" style="margin-top: -25px">*(为必填)</span>
        </div>

        <div class="menu">真实姓名:</div>
        <div class="kong">
            <input id="true_name" type="text" name="trueName"/>
        </div>

        <div class="menu">性别:</div>
        <div class="kong" style="width:200px;">
            男<input type="radio" name="sex" value="1" checked/>
            女<input type="radio" name="sex" value="2"/>
        </div>

        <div class="menu">年龄:</div>
        <div class="kong">
            <input type="text" name="age"/>
            <span id="age_span" class="tian" style="margin-top: -25px">*(为必填)</span>
        </div>

        <div class="menu">密码:</div>
        <div class="kong">
            <input id="password" type="password" name="password"/>
            <span id="password_span" class="tian" style="margin-top: -25px">*(为必填)</span>
        </div>

        <div class="menu">确认密码:</div>
        <div class="kong">
            <input id="re_password" type="password" name="repassword" />
            <span id="re_password_span" class="tian">*(为必填)</span>
        </div>

        <div class="menu">电话号码:</div>
        <div class="kong">
            <input id="phone" type="text" name="phone">
        </div>

        <div class="menu">邮箱地址:</div>
        <div class="kong">
            <input id="email" type="text" name="email" >
            <span id="email_span" class="tian">*(为必填)</span>
        </div>

        <div class="menu">爱好:</div>
        <div class="kong" style="width: 300px;">
            撩妹 <input type="checkbox" value="撩妹" name="hobby">
            写代码 <input type="checkbox" value="写代码" name="hobby">
            篮球 <input type="checkbox" value="篮球" name="hobby">
            足球 <input type="checkbox" value="足球" name="hobby">
        </div>

        <div class="menu">个人签名:</div>
        <div class="kong">
                    <textarea name="signature" style="width: 280px;height: 40px;">
                    有点懒。。。。
                    </textarea>
        </div>
    </div>

    <div class="can">
        <input id="i111" type="submit" name="002" value="注  册" onclick="check();">
        <p style="width: 200px;display: inline-block;"></p>
        <input id="i222" type="button" name="004" value="取  消">
    </div>

</form>

<script type="text/javascript">
    //刷新or取消
    document.getElementById('i77').onclick = function(){
        location.reload();
    }
    document.getElementById('i222').onclick = function(){
        location.reload();
    }

    //用户名验证
    function checkname(){
        var div = document.getElementById("user_name_span");
        div.innerHTML = "";
        var name1 = document.tijiao.userName.value;
        if (name1 === "") {
            div.innerHTML = "用户名不能为空！";
            document.tijiao.userName.focus();
            return false;
        }
        if (name1.length < 4 || name1.length > 16) {
            div.innerHTML = "长度4-16个字符";
            document.tijiao.userName.select();
            return false;
        }
        var charname1 = name1.toLowerCase();
        for (var i = 0; i < name1.length; i++) {
            var charname = charname1.charAt(i);
            if (!(charname >= 0 && charname <= 9) && (!(charname >= 'a' && charname <= 'z')) && (charname != '_')) {
                div.innerHTML = "用户名包含非法字符";
                document.tijiao.userName.select();
                return false;
            }
        }
        return true;
    }

    //密码验证
    function checkpassword(){
        var div = document.getElementById("password_span");
        div.innerHTML = "";
        var password = document.tijiao.password.value;
        if (password === "") {
            div.innerHTML = "密码不能为空";
            document.tijiao.password.focus();
            return false;
        }
        if (password.length < 4 || password.length > 16) {
            div.innerHTML = "密码长度为4-16位";
            document.tijiao.password.select();
            return false;
        }
        return true;
    }

    function checkrepassword(){
        var div = document.getElementById("re_password_span");
        div.innerHTML = "";
        var password = document.tijiao.repassword.value;
        var repass = document.tijiao.repassword.value;
        if (repass === "") {
            div.innerHTML = "密码不能为空";
            document.tijiao.repassword.focus();
            return false;
        }
        if (password !== repass) {
            div.innerHTML = "密码不一致";
            document.tijiao.repassword.select();
            return false;
        }
        return true;
    }

    //邮箱验证
    function checkEmail(){
        var div = document.getElementById("email_span");
        div.innerHTML = "";
        var email = document.tijiao.email.value;
        var sw = email.indexOf("@", 0);
        var sw1 = email.indexOf(".", 0);
        var tt = sw1 - sw;
        if (email.length === 0) {
            div.innerHTML = "邮箱不能为空";
            document.tijiao.email.focus();
            return false;
        }

        if (email.indexOf("@", 0) === -1) {
            div.innerHTML = "必须包含@符号";
            document.tijiao.email.select();
            return false;
        }

        if (email.indexOf(".", 0) === -1) {
            div.innerHTML = "必须包含.符号";
            document.tijiao.email.select();
            return false;
        }

        if (tt === 1) {
            div.innerHTML = "@和.不能一起";
            document.tijiao.email.select();
            return false;
        }

        if (sw > sw1) {
            div.innerHTML  = "@符号必须在.之前";
            document.tijiao.email.select();
            return false;
        } else {
            return true;
        }
    }

    function checkAge() {
        var div = document.getElementById("age_span");
        div.innerHTML = "";
        var age = document.tijiao.age.value;
        if (age === "") {
            div.innerHTML = "年龄不能为空";
            document.tijiao.age.focus();
            return false;
        }
        if (isNaN(age)) {
            div.innerHTML = "年龄必须是数字";
            document.tijiao.age.select();
            return false;
        }
        if(age<=0 || age >= 150){
            div.innerHTML = "年龄必须在[1,150)";
            document.tijiao.age.select();
            return false;
        }
        return true;
    }

    function check(){
        return !!(checkname() && checkAge() && checkpassword() && checkrepassword() && checkEmail());
    }


    //定义一个全局的ajax变量
    var ajax;
    //getAjax()方法用来获取一个Ajax对象
    function getAjax() {
        try {
            //现代的浏览器获取Ajax的方法
            ajax = new XMLHttpRequest();
        } catch (e) {
            //try中无法执行，得到错误，catch抓取错误，ie7以下的版本获取Ajax的方法
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //返回一个Ajax对象
        return ajax;
    }

    function checkUserName() {
        //得到Ajax的对象
        ajax = getAjax();
        //使用open方法与服务器建立连接
        ajax.open("POST", "${pageContext.request.contextPath}/final/ajax", true);
        //监听ajax的状态，每当状态改变时，就会调用该函数
        ajax.onreadystatechange = function() {
            //当Ajax满足以下条件时就会进入下一步
            if (ajax.readyState == 4 && ajax.status == 200) {
                //获取服务器返回的数据
                var result = ajax.responseText;
                if (result === "true") {
                    //满足条件就转到welcome.jsp
                    document.getElementById("user_name_span").innerHTML = "用户名已经被占用，请换一个";
                } else {
                    //不满足条件进行提示，并将按钮变成不可用状态
                    document.getElementById("user_name_span").innerHTML = "用户名可以被使用";
                }
            }
        };
        //Ajax时post提交，必须写这个请求头，就这么写，都是一样的
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //获得form表单的数据
        var userName = document.getElementById("user_name").value;
        if(userName === '' || userName === undefined){
            document.getElementById("user_name_span").innerHTML = "用户名不能为空";
            return ;
        }
        //将其拼接成一个，发送到servlet中
        var param = "userName=" + userName;
        ajax.send(param);
    }

</script>
</body>
</html>
